<template>
  <div class="hardware-integration-page">
    <el-card>
      <template #header>
        <div class="page-header">
          <h3>收银台硬件集成</h3>
          <div class="header-actions">
            <el-button type="primary" @click="refreshDevices">
              <el-icon><Refresh /></el-icon>
              刷新设备
            </el-button>
            <el-button type="success" @click="testAllDevices">
              <el-icon><Tools /></el-icon>
              测试所有设备
            </el-button>
            <el-button type="warning" @click="showSettings">
              <el-icon><Setting /></el-icon>
              设备设置
            </el-button>
          </div>
        </div>
      </template>

      <!-- 设备状态概览 -->
      <div class="device-overview">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="6" v-for="device in deviceStatus" :key="device.type">
            <el-card class="device-card" :class="device.status">
              <div class="device-content">
                <div class="device-icon">
                  <el-icon size="32"><component :is="device.icon" /></el-icon>
                </div>
                <div class="device-info">
                  <h4>{{ device.name }}</h4>
                  <p>{{ device.description }}</p>
                  <el-tag :type="getStatusType(device.status)" size="small">
                    {{ getStatusText(device.status) }}
                  </el-tag>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 设备管理 -->
      <div class="device-management">
        <el-tabs v-model="activeTab" @tab-change="handleTabChange">
          <!-- 扫码枪 -->
          <el-tab-pane label="扫码枪" name="scanner">
            <div class="device-section">
              <div class="device-header">
                <h4>扫码枪配置</h4>
                <el-button type="primary" @click="configureScanner">配置扫码枪</el-button>
              </div>
              
              <el-table :data="scannerDevices" border>
                <el-table-column prop="name" label="设备名称" width="150" />
                <el-table-column prop="type" label="设备类型" width="120" />
                <el-table-column prop="port" label="连接端口" width="120" />
                <el-table-column prop="status" label="状态" width="100">
                  <template #default="{ row }">
                    <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="lastUsed" label="最后使用" width="150" />
                <el-table-column label="操作" width="200">
                  <template #default="{ row }">
                    <el-button type="primary" size="small" @click="testDevice(row)">测试</el-button>
                    <el-button type="success" size="small" @click="configureDevice(row)">配置</el-button>
                    <el-button type="danger" size="small" @click="disconnectDevice(row)">断开</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <!-- 打印机 -->
          <el-tab-pane label="打印机" name="printer">
            <div class="device-section">
              <div class="device-header">
                <h4>打印机配置</h4>
                <el-button type="primary" @click="configurePrinter">配置打印机</el-button>
              </div>
              
              <el-table :data="printerDevices" border>
                <el-table-column prop="name" label="设备名称" width="150" />
                <el-table-column prop="type" label="打印机类型" width="120" />
                <el-table-column prop="port" label="连接端口" width="120" />
                <el-table-column prop="paperSize" label="纸张规格" width="120" />
                <el-table-column prop="status" label="状态" width="100">
                  <template #default="{ row }">
                    <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="lastUsed" label="最后使用" width="150" />
                <el-table-column label="操作" width="200">
                  <template #default="{ row }">
                    <el-button type="primary" size="small" @click="testPrint(row)">测试打印</el-button>
                    <el-button type="success" size="small" @click="configureDevice(row)">配置</el-button>
                    <el-button type="info" size="small" @click="checkPaper(row)">检查纸张</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <!-- 钱箱 -->
          <el-tab-pane label="钱箱" name="cashdrawer">
            <div class="device-section">
              <div class="device-header">
                <h4>钱箱配置</h4>
                <el-button type="primary" @click="configureCashDrawer">配置钱箱</el-button>
              </div>
              
              <el-table :data="cashDrawerDevices" border>
                <el-table-column prop="name" label="设备名称" width="150" />
                <el-table-column prop="type" label="钱箱类型" width="120" />
                <el-table-column prop="port" label="连接端口" width="120" />
                <el-table-column prop="status" label="状态" width="100">
                  <template #default="{ row }">
                    <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="lastOpened" label="最后开启" width="150" />
                <el-table-column label="操作" width="200">
                  <template #default="{ row }">
                    <el-button type="primary" size="small" @click="openCashDrawer(row)">开启钱箱</el-button>
                    <el-button type="success" size="small" @click="configureDevice(row)">配置</el-button>
                    <el-button type="warning" size="small" @click="checkCashDrawer(row)">检查状态</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <!-- 客户显示屏 -->
          <el-tab-pane label="客户显示屏" name="display">
            <div class="device-section">
              <div class="device-header">
                <h4>客户显示屏配置</h4>
                <el-button type="primary" @click="configureDisplay">配置显示屏</el-button>
              </div>
              
              <el-table :data="displayDevices" border>
                <el-table-column prop="name" label="设备名称" width="150" />
                <el-table-column prop="type" label="显示屏类型" width="120" />
                <el-table-column prop="port" label="连接端口" width="120" />
                <el-table-column prop="resolution" label="分辨率" width="120" />
                <el-table-column prop="status" label="状态" width="100">
                  <template #default="{ row }">
                    <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="lastUsed" label="最后使用" width="150" />
                <el-table-column label="操作" width="200">
                  <template #default="{ row }">
                    <el-button type="primary" size="small" @click="testDisplay(row)">测试显示</el-button>
                    <el-button type="success" size="small" @click="configureDevice(row)">配置</el-button>
                    <el-button type="info" size="small" @click="showDisplayContent(row)">显示内容</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <!-- 支付设备 -->
          <el-tab-pane label="支付设备" name="payment">
            <div class="device-section">
              <div class="device-header">
                <h4>支付设备配置</h4>
                <el-button type="primary" @click="configurePaymentDevice">配置支付设备</el-button>
              </div>
              
              <el-table :data="paymentDevices" border>
                <el-table-column prop="name" label="设备名称" width="150" />
                <el-table-column prop="type" label="设备类型" width="120" />
                <el-table-column prop="port" label="连接端口" width="120" />
                <el-table-column prop="supportedMethods" label="支持方式" width="150" />
                <el-table-column prop="status" label="状态" width="100">
                  <template #default="{ row }">
                    <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="lastUsed" label="最后使用" width="150" />
                <el-table-column label="操作" width="200">
                  <template #default="{ row }">
                    <el-button type="primary" size="small" @click="testPayment(row)">测试支付</el-button>
                    <el-button type="success" size="small" @click="configureDevice(row)">配置</el-button>
                    <el-button type="warning" size="small" @click="checkPaymentStatus(row)">检查状态</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>

    <!-- 设备配置对话框 -->
    <el-dialog
      v-model="configDialogVisible"
      :title="`配置${currentDevice?.name || '设备'}`"
      width="600px"
    >
      <el-form :model="deviceConfig" label-width="120px">
        <el-form-item label="设备名称">
          <el-input v-model="deviceConfig.name" />
        </el-form-item>
        <el-form-item label="连接端口">
          <el-select v-model="deviceConfig.port" placeholder="选择端口" style="width: 100%">
            <el-option label="COM1" value="COM1" />
            <el-option label="COM2" value="COM2" />
            <el-option label="COM3" value="COM3" />
            <el-option label="USB" value="USB" />
            <el-option label="网络" value="NETWORK" />
          </el-select>
        </el-form-item>
        <el-form-item label="波特率" v-if="deviceConfig.port.startsWith('COM')">
          <el-select v-model="deviceConfig.baudRate" style="width: 100%">
            <el-option label="9600" value="9600" />
            <el-option label="19200" value="19200" />
            <el-option label="38400" value="38400" />
            <el-option label="57600" value="57600" />
            <el-option label="115200" value="115200" />
          </el-select>
        </el-form-item>
        <el-form-item label="数据位" v-if="deviceConfig.port.startsWith('COM')">
          <el-select v-model="deviceConfig.dataBits" style="width: 100%">
            <el-option label="7" value="7" />
            <el-option label="8" value="8" />
          </el-select>
        </el-form-item>
        <el-form-item label="停止位" v-if="deviceConfig.port.startsWith('COM')">
          <el-select v-model="deviceConfig.stopBits" style="width: 100%">
            <el-option label="1" value="1" />
            <el-option label="2" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="校验位" v-if="deviceConfig.port.startsWith('COM')">
          <el-select v-model="deviceConfig.parity" style="width: 100%">
            <el-option label="无" value="none" />
            <el-option label="奇校验" value="odd" />
            <el-option label="偶校验" value="even" />
          </el-select>
        </el-form-item>
        <el-form-item label="IP地址" v-if="deviceConfig.port === 'NETWORK'">
          <el-input v-model="deviceConfig.ipAddress" placeholder="请输入IP地址" />
        </el-form-item>
        <el-form-item label="端口号" v-if="deviceConfig.port === 'NETWORK'">
          <el-input-number v-model="deviceConfig.portNumber" :min="1" :max="65535" style="width: 100%" />
        </el-form-item>
        <el-form-item label="自动连接">
          <el-switch v-model="deviceConfig.autoConnect" />
        </el-form-item>
        <el-form-item label="设备描述">
          <el-input v-model="deviceConfig.description" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="configDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveDeviceConfig" :loading="saveLoading">
          保存配置
        </el-button>
      </template>
    </el-dialog>

    <!-- 设备测试对话框 -->
    <el-dialog
      v-model="testDialogVisible"
      :title="`测试${currentDevice?.name || '设备'}`"
      width="500px"
    >
      <div class="test-content">
        <div class="test-status">
          <el-icon size="48" :color="testResult.success ? '#67c23a' : '#f56c6c'">
            <component :is="testResult.success ? 'Check' : 'Close'" />
          </el-icon>
          <h3>{{ testResult.message }}</h3>
          <p v-if="testResult.details">{{ testResult.details }}</p>
        </div>
        
        <div v-if="testResult.success && currentDevice?.type === 'printer'" class="test-actions">
          <el-button type="primary" @click="printTestPage">打印测试页</el-button>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="testDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="retryTest" v-if="!testResult.success">重试</el-button>
      </template>
    </el-dialog>

    <!-- 系统设置对话框 -->
    <el-dialog
      v-model="settingsDialogVisible"
      title="系统设置"
      width="700px"
    >
      <el-tabs v-model="settingsTab">
        <el-tab-pane label="通用设置" name="general">
          <el-form :model="systemSettings" label-width="120px">
            <el-form-item label="自动检测设备">
              <el-switch v-model="systemSettings.autoDetect" />
            </el-form-item>
            <el-form-item label="设备检测间隔">
              <el-input-number v-model="systemSettings.detectInterval" :min="5" :max="300" style="width: 200px" />
              <span class="form-tip">秒</span>
            </el-form-item>
            <el-form-item label="连接超时时间">
              <el-input-number v-model="systemSettings.timeout" :min="1" :max="30" style="width: 200px" />
              <span class="form-tip">秒</span>
            </el-form-item>
            <el-form-item label="错误重试次数">
              <el-input-number v-model="systemSettings.retryCount" :min="1" :max="10" style="width: 200px" />
            </el-form-item>
            <el-form-item label="启用设备日志">
              <el-switch v-model="systemSettings.enableLogging" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="默认配置" name="defaults">
          <el-form :model="defaultSettings" label-width="120px">
            <el-form-item label="默认打印机">
              <el-select v-model="defaultSettings.defaultPrinter" placeholder="选择默认打印机" style="width: 100%">
                <el-option 
                  v-for="printer in printerDevices" 
                  :key="printer.id"
                  :label="printer.name"
                  :value="printer.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="默认扫码枪">
              <el-select v-model="defaultSettings.defaultScanner" placeholder="选择默认扫码枪" style="width: 100%">
                <el-option 
                  v-for="scanner in scannerDevices" 
                  :key="scanner.id"
                  :label="scanner.name"
                  :value="scanner.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="默认钱箱">
              <el-select v-model="defaultSettings.defaultCashDrawer" placeholder="选择默认钱箱" style="width: 100%">
                <el-option 
                  v-for="drawer in cashDrawerDevices" 
                  :key="drawer.id"
                  :label="drawer.name"
                  :value="drawer.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="默认显示屏">
              <el-select v-model="defaultSettings.defaultDisplay" placeholder="选择默认显示屏" style="width: 100%">
                <el-option 
                  v-for="display in displayDevices" 
                  :key="display.id"
                  :label="display.name"
                  :value="display.id"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      
      <template #footer>
        <el-button @click="settingsDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveSystemSettings" :loading="saveLoading">
          保存设置
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const activeTab = ref('scanner')
const configDialogVisible = ref(false)
const testDialogVisible = ref(false)
const settingsDialogVisible = ref(false)
const settingsTab = ref('general')
const saveLoading = ref(false)

// 当前设备
const currentDevice = ref(null)

// 设备状态概览
const deviceStatus = ref([
  {
    type: 'scanner',
    name: '扫码枪',
    description: '商品条码扫描',
    status: 'connected',
    icon: 'Scan'
  },
  {
    type: 'printer',
    name: '打印机',
    description: '小票打印',
    status: 'connected',
    icon: 'Printer'
  },
  {
    type: 'cashdrawer',
    name: '钱箱',
    description: '现金存储',
    status: 'connected',
    icon: 'Money'
  },
  {
    type: 'display',
    name: '客户显示屏',
    description: '价格显示',
    status: 'disconnected',
    icon: 'Monitor'
  }
])

// 设备列表
const scannerDevices = ref([
  {
    id: 1,
    name: '扫码枪001',
    type: 'USB扫码枪',
    port: 'USB',
    status: 'connected',
    lastUsed: '2024-01-15 14:30:00'
  }
])

const printerDevices = ref([
  {
    id: 1,
    name: '热敏打印机',
    type: '热敏打印机',
    port: 'USB',
    paperSize: '58mm',
    status: 'connected',
    lastUsed: '2024-01-15 14:25:00'
  }
])

const cashDrawerDevices = ref([
  {
    id: 1,
    name: '钱箱001',
    type: '电子钱箱',
    port: 'COM1',
    status: 'connected',
    lastOpened: '2024-01-15 14:20:00'
  }
])

const displayDevices = ref([
  {
    id: 1,
    name: '客户显示屏',
    type: 'LED显示屏',
    port: 'USB',
    resolution: '128x64',
    status: 'disconnected',
    lastUsed: '2024-01-15 10:00:00'
  }
])

const paymentDevices = ref([
  {
    id: 1,
    name: 'POS机',
    type: 'POS终端',
    port: 'USB',
    supportedMethods: '刷卡,扫码',
    status: 'connected',
    lastUsed: '2024-01-15 14:15:00'
  }
])

// 设备配置
const deviceConfig = reactive({
  name: '',
  port: 'USB',
  baudRate: '9600',
  dataBits: '8',
  stopBits: '1',
  parity: 'none',
  ipAddress: '',
  portNumber: 8080,
  autoConnect: true,
  description: ''
})

// 系统设置
const systemSettings = reactive({
  autoDetect: true,
  detectInterval: 30,
  timeout: 10,
  retryCount: 3,
  enableLogging: true
})

const defaultSettings = reactive({
  defaultPrinter: '',
  defaultScanner: '',
  defaultCashDrawer: '',
  defaultDisplay: ''
})

// 测试结果
const testResult = reactive({
  success: false,
  message: '',
  details: ''
})

// 方法
const getStatusType = (status) => {
  const statusMap = {
    'connected': 'success',
    'disconnected': 'danger',
    'error': 'danger',
    'warning': 'warning'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    'connected': '已连接',
    'disconnected': '未连接',
    'error': '错误',
    'warning': '警告'
  }
  return statusMap[status] || '未知'
}

const handleTabChange = (tabName) => {
  activeTab.value = tabName
}

const refreshDevices = () => {
  ElMessage.success('设备列表已刷新')
  // 这里应该重新扫描设备
}

const testAllDevices = async () => {
  ElMessage.info('开始测试所有设备...')
  
  // 模拟测试过程
  await new Promise(resolve => setTimeout(resolve, 2000))
  
  ElMessage.success('所有设备测试完成')
}

const showSettings = () => {
  settingsDialogVisible.value = true
}

const configureScanner = () => {
  currentDevice.value = { name: '扫码枪', type: 'scanner' }
  configDialogVisible.value = true
}

const configurePrinter = () => {
  currentDevice.value = { name: '打印机', type: 'printer' }
  configDialogVisible.value = true
}

const configureCashDrawer = () => {
  currentDevice.value = { name: '钱箱', type: 'cashdrawer' }
  configDialogVisible.value = true
}

const configureDisplay = () => {
  currentDevice.value = { name: '客户显示屏', type: 'display' }
  configDialogVisible.value = true
}

const configurePaymentDevice = () => {
  currentDevice.value = { name: '支付设备', type: 'payment' }
  configDialogVisible.value = true
}

const testDevice = async (device) => {
  currentDevice.value = device
  testDialogVisible.value = true
  
  // 模拟设备测试
  await new Promise(resolve => setTimeout(resolve, 1500))
  
  testResult.success = Math.random() > 0.3 // 70%成功率
  testResult.message = testResult.success ? '设备测试成功' : '设备测试失败'
  testResult.details = testResult.success ? '设备响应正常' : '设备无响应或连接失败'
}

const configureDevice = (device) => {
  currentDevice.value = device
  Object.assign(deviceConfig, {
    name: device.name,
    port: device.port,
    description: device.description || ''
  })
  configDialogVisible.value = true
}

const disconnectDevice = (device) => {
  device.status = 'disconnected'
  ElMessage.success(`已断开设备: ${device.name}`)
}

const testPrint = async (device) => {
  ElMessage.info(`正在测试打印: ${device.name}`)
  
  // 模拟打印测试
  await new Promise(resolve => setTimeout(resolve, 2000))
  
  ElMessage.success('打印测试完成')
}

const checkPaper = (device) => {
  ElMessage.info(`检查纸张状态: ${device.name}`)
  // 模拟检查纸张
}

const openCashDrawer = (device) => {
  ElMessage.success(`钱箱已开启: ${device.name}`)
  device.lastOpened = new Date().toLocaleString()
}

const checkCashDrawer = (device) => {
  ElMessage.info(`检查钱箱状态: ${device.name}`)
}

const testDisplay = async (device) => {
  ElMessage.info(`测试显示屏: ${device.name}`)
  
  // 模拟显示测试
  await new Promise(resolve => setTimeout(resolve, 1000))
  
  ElMessage.success('显示屏测试完成')
}

const showDisplayContent = (device) => {
  ElMessage.info(`显示内容: ${device.name}`)
}

const testPayment = async (device) => {
  ElMessage.info(`测试支付设备: ${device.name}`)
  
  // 模拟支付测试
  await new Promise(resolve => setTimeout(resolve, 2000))
  
  ElMessage.success('支付设备测试完成')
}

const checkPaymentStatus = (device) => {
  ElMessage.info(`检查支付设备状态: ${device.name}`)
}

const saveDeviceConfig = async () => {
  saveLoading.value = true
  
  // 模拟保存配置
  await new Promise(resolve => setTimeout(resolve, 1000))
  
  ElMessage.success('设备配置已保存')
  configDialogVisible.value = false
  saveLoading.value = false
}

const printTestPage = () => {
  ElMessage.success('测试页打印完成')
}

const retryTest = () => {
  testDevice(currentDevice.value)
}

const saveSystemSettings = async () => {
  saveLoading.value = true
  
  // 模拟保存设置
  await new Promise(resolve => setTimeout(resolve, 1000))
  
  localStorage.setItem('systemSettings', JSON.stringify(systemSettings))
  localStorage.setItem('defaultSettings', JSON.stringify(defaultSettings))
  
  ElMessage.success('系统设置已保存')
  settingsDialogVisible.value = false
  saveLoading.value = false
}

// 生命周期
onMounted(() => {
  // 加载保存的设置
  const savedSystemSettings = localStorage.getItem('systemSettings')
  if (savedSystemSettings) {
    Object.assign(systemSettings, JSON.parse(savedSystemSettings))
  }
  
  const savedDefaultSettings = localStorage.getItem('defaultSettings')
  if (savedDefaultSettings) {
    Object.assign(defaultSettings, JSON.parse(savedDefaultSettings))
  }
})
</script>

<style scoped>
.hardware-integration-page {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h3 {
  margin: 0;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.device-overview {
  margin-bottom: 30px;
}

.device-card {
  transition: all 0.3s ease;
  cursor: pointer;
}

.device-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.device-card.connected {
  border-left: 4px solid #67c23a;
}

.device-card.disconnected {
  border-left: 4px solid #f56c6c;
}

.device-card.error {
  border-left: 4px solid #f56c6c;
}

.device-card.warning {
  border-left: 4px solid #e6a23c;
}

.device-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.device-icon {
  width: 60px;
  height: 60px;
  background: #f5f7fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
}

.device-info {
  flex: 1;
}

.device-info h4 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.device-info p {
  margin: 0 0 8px 0;
  color: #606266;
  font-size: 14px;
}

.device-management {
  margin-top: 20px;
}

.device-section {
  padding: 20px 0;
}

.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.device-header h4 {
  margin: 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
}

.test-content {
  text-align: center;
  padding: 20px 0;
}

.test-status {
  margin-bottom: 20px;
}

.test-status h3 {
  margin: 16px 0 8px 0;
  color: #303133;
}

.test-status p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.test-actions {
  margin-top: 20px;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-left: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .device-content {
    flex-direction: column;
    text-align: center;
  }
  
  .device-icon {
    width: 50px;
    height: 50px;
  }
  
  .device-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
}
</style>
